﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录与注册页面</title>
	<!-- 引入 Google Fonts -->
	<link rel="stylesheet"
		href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
	<!-- 引入 Font Awesome 图标库 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
	<style>
		body {
			font-family: 'Poppins', sans-serif;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
		}

		.login-container {
			background-color: rgba(255, 255, 255, 0.9);
			padding: 40px;
			border-radius: 15px;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
			width: 100%;
			max-width: 400px;
			animation: fadeIn 0.5s ease;
			display: flex;
			flex-direction: column;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(-20px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.login-container h2 {
			text-align: center;
			margin-bottom: 30px;
			color: #333;
			font-size: 28px;
			font-weight: 600;
		}

		.form-group {
			margin-bottom: 25px;
		}

		.form-group label {
			display: block;
			margin-bottom: 10px;
			color: #555;
			font-size: 16px;
			font-weight: 500;
		}

		.form-group input {
			width: 92%;
			padding: 13px;
			border: 2px solid #ccc;
			/* 修改输入框边框颜色 */
			border-radius: 8px;
			background-color: #fff;
			/* 修改输入框背景颜色 */
			font-size: 16px;
			transition: all 0.3s ease;
			/* 修改过渡效果 */
		}

		.form-group input:focus {
			border-color: #667eea;
			/* 修改输入框聚焦时的边框颜色 */
			background-color: #f8f8f8;
			/* 修改输入框聚焦时的背景颜色 */
			outline: none;
		}

		.form-group button {
			width: 100%;
			padding: 15px;
			background-color: #667eea;
			color: #fff;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			font-size: 18px;
			font-weight: 600;
			transition: background-color 0.3s ease;
		}

		.form-group button:hover {
			background-color: #5a67d8;
		}

		.error-message {
			color: #ff3d00;
			text-align: center;
			margin-top: 20px;
			font-size: 14px;
		}

		#register-form {
			display: none;
		}

		#toggle-buttons {
			display: flex;
			justify-content: space-around;
			margin-top: 30px;
		}

		#toggle-buttons button {
			padding: 12px 25px;
			border: none;
			background-color: #667eea;
			/* 修改切换按钮背景颜色 */
			color: #fff;
			/* 修改切换按钮文字颜色 */
			border-radius: 8px;
			cursor: pointer;
			font-size: 16px;
			font-weight: 500;
			transition: background-color 0.3s ease;
		}

		#toggle-buttons button:hover {
			background-color: #5a67d8;
		}

		.role-options {
			display: flex;
			gap: 20px;
			justify-content: center;
		}

		.role-options label {
			display: flex;
			align-items: center;
			gap: 10px;
			cursor: pointer;
			background-color: #f0f0f0;
			padding: 12px 20px;
			border-radius: 8px;
			transition: background-color 0.3s ease;
		}

		.role-options label:hover {
			background-color: #e0e0e0;
		}

		.role-options input[type="radio"] {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			width: 20px;
			height: 20px;
			border: 2px solid #667eea;
			border-radius: 50%;
			outline: none;
			transition: border-color 0.3s ease;
		}

		.role-options input[type="radio"]:checked {
			border-color: #667eea;
			background-color: #667eea;
		}
	</style>
	<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
</head>

<body style="background:#080b12 url('../img/backgrounds/blue-background-img.jpg') no-repeat center top fixed;">
	<div class="login-container">
		<form id="login-form">
			<h2>登录</h2>
			<div class="form-group">
				<label for="username">用户名:</label>
				<input type="text" id="username" name="username" required>
			</div>
			<div class="form-group">
				<label for="password">密码:</label>
				<input type="password" id="password" name="password" required>
			</div>
			<div class="form-group">
				<button type="submit">登录</button>
			</div>
		</form>
		<form id="register-form">
			<h2>注册</h2>
			<div class="form-group">
				<label for="reg-username">用户名:</label>
				<input type="text" id="reg-username" name="username" required>
			</div>
			<div class="form-group">
				<label for="reg-password">密码:</label>
				<input type="password" id="reg-password" name="password" required>
			</div>
			<div class="form-group">
				<label>用户角色:</label>
				<div class="role-options">
					<label>
						<input type="radio" name="role" value="admin">
						<i class="fa-solid fa-user-gear"></i> 管理员
					</label>
					<label>
						<input type="radio" name="role" value="normal" checked>
						<i class="fa-solid fa-user"></i> 普通用户
					</label>
				</div>
			</div>
			<div class="form-group">
				<button type="submit">注册</button>
			</div>
		</form>
		<div class="error-message" id="error-message"></div>
		<div id="toggle-buttons">
			<button id="login-toggle">登录</button>
			<button id="register-toggle">注册</button>
		</div>
	</div>

	<script>
		$(document).ready(function () {
			// 切换登录和注册表单
			$('#login-toggle').click(function () {
				$('#login-form').show();
				$('#register-form').hide();
			});
			$('#register-toggle').click(function () {
				$('#login-form').hide();
				$('#register-form').show();
			});

			// 处理登录表单提交
			$('#login-form').on('submit', function (e) {
				e.preventDefault();

				var username = $('#username').val();
				var password = $('#password').val();

				$.ajax({
					url: '/login',
					type: 'POST',
					data: {
						username: username,
						password: password
					},
					dataType: 'json',
					success: function (result, status, xhr) {
						handleResponse(result, '/home.html');
					},
					error: function (xhr, status, error) {
						handleError(xhr.status, '登录');
					}
				});
			});

			// 处理注册表单提交
			$('#register-form').on('submit', function (e) {
				e.preventDefault();
				var username = $('#reg-username').val();
				var password = $('#reg-password').val();
				var isAdmin = $('input[name="role"]:checked').val() === 'admin'; // 管理员时isAdmin为true

				$.ajax({
					url: '/register',
					type: 'POST',
					data: {
						username: username,
						password: password,
						isAdmin: isAdmin // 传递布尔值isAdmin
					},
					dataType: 'json',
					success: function (result) {
						handleResponse(result);
					},
					error: function (xhr, status, error) {
						handleError(xhr.status, '注册');
					}
				});
			});

			// 处理响应结果
			function handleResponse (result, redirectUrl) {
				switch (result.code) {
					case 200:
						if (redirectUrl) {
							const userRole = result.role;
							localStorage.setItem('userRole', userRole);
							window.location.href = redirectUrl;
						} else {
							$('#error-message').text('注册成功，请登录');
							$('#login-form').show();
							$('#register-form').hide();
						}
						break;
					case 400:
						$('#error-message').text('参数缺失，请检查用户名和密码。');
						break;
					case 401:
						$('#error-message').text('登录失败，用户名或密码错误。');
						break;
					case 500:
						$('#error-message').text('注册失败，用户名已存在或数据库错误。');
						break;
					default:
						$('#error-message').text('未知错误，请稍后重试。');
				}
			}

			// 处理错误响应
			function handleError (statusCode, action) {
				const errorMap = {
					400: `${action}请求参数有误，请检查输入。`,
					401: `${action}认证失败，用户名或密码错误。`,
					404: `${action}接口未找到，请联系管理员。`,
					408: `${action}请求超时，请稍后重试。`,
					500: `${action}该账户已经被使用了，请重试。`,
					default: `${action}请求发生未知错误，请稍后重试。`
				};

				// 根据状态码显示对应的错误信息
				$('#error-message').text(errorMap[statusCode] || errorMap.default);

				// 添加错误消息的动画效果
				$('#error-message').fadeIn(300).delay(3000).fadeOut(500);
			}
		});
	</script>
</body>

</html>